<template>
	<div>
		<div class="recommend-title">热销推荐</div>
		<ul>
			<router-link 
			tag="li" 
			class="item border-bottom" 
			v-for="item of list" 
			:key="item.id"
			:to="'/detail/' + item.id">
				<img class="item-img" :src="item.imgUrl">
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-button">查看详情</button>
				</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
export default{
  name:'HomeRecommend',
  props: {
	  list: Array
  }
}
</script>


<style lang="stylus" scoped>
@import "~styles/mixins.styl"
.recommend-title{
	line-height:40px;
	background:#eee;
	text-index:10px;
	margin-top:10px;
}
.item{
	display:flex;
	height:95px;
	overflow:hidden;
}
.item-img{
	height:85px;
	width:85px;
	padding:5px;
}
.item-info{
	flex:1;
	padding:5px;
	min-width:0;
}
.item-title{
	line-height:27px;
	font-size:16px;
	ellipsis()
}
.item-desc{
	line-height:20px;
	color:#ccc;
	ellipsis()
}
.item-button{
	background:#ff9300;
	border-radius:3px;
	padding:10px;
	line-height:5px;
	color:#fff;
}
</style>
